<template>
  <div class="tabs">
    <!-- -->
    <el-tag
        v-for="(item,index) in tags"
        :key="item.path"
        :closable="item.name!=='home'"
        :effect="$route.name===item.name?'dark':'plain'"
        @click="changeMenu(item)"
        @close="handleClose(item,index)"
        size="small"
        >
        <span>{{ item.label }}</span>
    </el-tag>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name: 'CommonTag',
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    // 调用tab.js中的closeTag函数
    ...mapMutations(['closeTag']),
    // 点击tag跳转
    changeMenu(item){
      if(this.$route.path !==item.path){
        this.$router.push({name:item.name})
      }
    },
    // 删除tag
    handleClose(item,index){
        // 调用tab.js中的closeTag函数
        this.closeTag(item);
        // 与索引相对应
        const length = this.tags.length;
        // 删除之后的跳转逻辑
        if(item.name !== this.$route.name){
            return;
        }
        // 删除最后一个
        if(index===length){
            this.$router.push({
                name:this.tags[index-1].name
            })
        }else{
            // 删除中间的
            this.$router.push({
                name:this.tags[index].name
            })
        }
    }
  },
  computed:{
    ...mapState({
        tags:state=>state.tab.tabsList
    }),
  }
};
</script>

<style lang="less" scoped>
.tabs{
    padding:20px;
    .el-tag{
        margin-right: 15px;
        // 鼠标样式
        cursor: pointer;
    }
}
</style>